<template>
  <div class="header">
    <div class="Logo">
      <div class="logo_button">LOGO</div>
      <div style="display: flex; flex-direction: row; align-items: center;" class="SizeFont">
        <div style="margin-right: 47px;">기업보안</div>
        <div style="margin-right: 47px;">모바일보안</div>
        <div style="margin-right: 47px;">플랜&구매</div>
        <div style="margin-right: 47px;">기술지원</div>
        <NuxtLink to="myPage">
          <a-button :icon="h(UserOutlined)" icon-size="20px" class="headr_button">마이페이지</a-button>
        </NuxtLink>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';

</script>
<style lang="scss">
.header {
  background-color: #979797;
  width: 1200px;
  margin: 0 auto;
  /* padding: 20px 0px; */
}

.Logo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 19px 30px 22px 30px;
}

.logo_button {
  background-color: #D9D9D9;
  padding: 17px 45px;
  font-size: 20px;
  line-height: 23.87px;
  text-align: center;
  align-items: center;
}

.headr_button {
  border-radius: 8px;
  border: 1px solid var(--primary-6, #1890FF);
  background: var(--primary-6, #1890FF);
  color: #FFFFFF;
  align-items: center;
  text-align: center;
  justify-content: center;
  :deep(.ant-btn){
    padding: 9px 15px;
    border-radius: 6px;
  }
  &>.anticon {
    font-size: 20px;
    color: #FFFFFF;
  }

  // 移除下划线
  &>.anticon+span {
    margin: 3px;
    text-decoration: none;
  }

}

.SizeFont div {
  color: #000;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}</style>